<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>测试结果</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../css/basic.css">

	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	<style type="text/css">
		.all {
			height: 30px;
			
			float: right;
		}

		.test {
			padding: 0;
			margin-left: 20px;
			margin-right: 20px;
			float: right;
			height: 27px;
		
		}
	</style>
</head>

<body>
	<div style="width: 85%;margin: 0 auto">

		<form class="layui-form">
			<p style="display: inline-block; color: deepskyblue; font-size: 24px;">测试结果</p>
			<div style="float: right;">
			<button class="layui-btn" style="float: right;">查找</button>
			<div class="layui-input-inline" style="width: 100px;">
					<select class="">
						<option>&nbsp;全部</option>
						<option>&nbsp;通过</option>
						<option>未通过</option>
					</select>
				</div>

			<div class="layui-input-inline" style="width: 200px;">
				<input class="layui-input" placeholder="请输入要查询的考试名称" />
			</div>
		</div>
		</form>
		<table class="layui-hide" id="test"></table>

		<script src="../layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->



		<script>
			layui.use('form', function () {

			})

			layui.use('table', function () {
				var table = layui.table;

				//展示已知数据
				table.render({
					elem: '#test'
						//,url:'/demo/table/user/'
						,
					cols: [
						[ //标题栏
							{
								type: 'checkbox'
							}, {
								field: 'name',
								width: 80,
								title: '姓名'
							}, {
								field: 'number',
								width: 120,
								title: '考试编号'
							}, {
								field: 'designation',
								width: 200,
								title: '考试名称'
							}, {
								field: 'subject',
								width: 150,
								title: '考试题目集'
							}, {
								field: 'time',
								width: 100,
								title: '创建时间'
							}, {
								field: 'chapter',
								width: 100,
								title: '学习章节名'
							}, {
								field: 'result',
								width: 130,
								title: '实际测试结果'
							}, {
								field: 'detail',
								width: 165,
								title: '是否通过测试'
							}

						]
					],
					page: true,
					data: [{
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}, {
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}, {
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}, {
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}, {
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}, {
							"name": "小王",
							"number": "18",
							"designation": "学习十九大一轮模拟考",
							"subject": "十九大学习手册",
							"time": "2018-01-17",
							"chapter": "",
							"result": "",
							"detail": ""
						}]
						//,skin: 'line' //表格风格
						,
					even: true
					//,page: true //是否显示分页
					//,limits: [5, 7, 10]
					//,limit: 5 //每页默认显示的数量
				});
			});
			table.render({
				cols: [
					[{
							field: 'id',
							title: 'ID',
							width: 100
						}, {
							fixed: 'right',
							width: 150,
							align: 'center',
							toolbar: '#barDemo'
						} //这里的toolbar值是模板元素的选择器
					]
				]
			});
		</script>
	</div>

</body>

</html>